<template>
	<view style="position: relative;">
		<pageheader :setting="settingdata"></pageheader>
		<view class="metions" v-if="examine_status==0">*完成企业认证，彰显苗店实力，获取更多商机</view>
		<view class="metions" v-if="examine_status==1">待审核</view>
		<view class="metions" v-if="examine_status==2">审核成功</view>
		<view class="metions" v-if="examine_status==3" style="color: #F92028;">审核失败,请重新提交审核</view>

		<view class="rowone">
			<text>企业名称</text>
			<u-input v-model="company_name" type="text" :border="false" placeholder="请填写企业名称"
				placeholderStyle="color:#B1B8C8" :clearable="false" input-align="right" class="inputs" />
		</view>
		<view class="rowone">
			<text>营业执照注册号</text>
			<u-input v-model="license" type="text" :border="false" placeholder="请填写营业执照注册号"
				placeholderStyle="color:#B1B8C8" :clearable="false" input-align="right" class="inputs" />
		</view>
		<view class="rowone">
			<text>法人代表姓名</text>
			<u-input v-model="name" type="text" :border="false" placeholder="请填写法人代表姓名" placeholderStyle="color:#B1B8C8"
				:clearable="false" input-align="right" class="inputs" />
		</view>
		<view class="rowone">
			<text>法人代表电话</text>
			<u-input v-model="mobile" type="number" maxlength="11" :border="false" placeholder="请填写法人代表电话"
				placeholderStyle="color:#B1B8C8" :clearable="false" input-align="right" class="inputs" />
		</view>


		<view class="rowone">
			<text>企业地址</text>
			<picker @change="setatlas" :range="array" mode="region" :value="array">
				<view class="flex_align">
					<view class="uni-input" v-if="array[0].length<1">请选择地址</view>
					<view class="uni-input" v-else>{{array[0]}} {{array[1]}} {{array[2]}}</view>
				</view>
			</picker>
		</view>
		<view class="rowone">
			<text>详细地址</text>
			<u-input v-model="address" type="text" :border="false" placeholder="请填写企业详细地址"
				placeholderStyle="color:#B1B8C8" :clearable="false" input-align="right" class="inputs" />
		</view>

		<view class="rowones">
			<text>营业范围</text>
			<textarea v-model="business" placeholder="请填写营业范围" placeholderStyle="color:#B1B8C8" maxlength="200"
				class="are" />
			<view class="numbers">{{business.length}}/200</view>
		</view>

		<view class="rowones">
			<text class="rowt">企业介绍</text>
			<textarea v-model="intro" placeholder="请填写企业介绍" placeholderStyle="color:#B1B8C8" maxlength="200"
				class="are" />
			<view class="numbers">{{intro.length}}/200</view>
		</view>

		<view class="imgtitle">上传企业照片({{sipimg.length}}/6)</view>
		<view class="imgmetions">请上传企业照片</view>
		<view class="cardimgbox" v-if="examine_status!=2">
			<u-upload ref="uploads" max-size="12328959" :action="action" width="310" height="200" max-count="6"
				:file-list="sipimages" @on-remove="sipremove" @on-uploaded="sipupload"></u-upload>
		</view>
		<view class="cardimgbox" v-if="examine_status==2">
			<view v-for="(item,index) in sipimages" class="oncard">
				<image :src="item.url" mode=""></image>
			</view>
		</view>

		<view class="imgtitle">上传企业资质({{images.length}}/6)</view>
		<view class="imgmetions">温馨提示：请上传营业执照及其他资质证书</view>
		<view class="cardimgbox" v-if="examine_status!=2">
			<u-upload ref="upload" max-size="12328959" :action="action" width="310" height="200" max-count="6"
				:file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded"></u-upload>
		</view>
		<view class="cardimgbox" v-if="examine_status==2" style="    padding-bottom: 100rpx;">
			<view v-for="(item,index) in echoimages" class="oncard">
				<image :src="item.url" mode=""></image>
			</view>
		</view>

		<!-- 审核中 -->
		<view class="maask" v-if="examine_status==1||examine_status==2"></view>

		<view class="note" v-if="examine_status==3">{{'审核失败备注 : '+note}}</view>
		<view class="submitbtn" v-if="examine_status==0" @click="submit">提交</view>
		<view class="submitbtnD" v-if="examine_status==1">待审核</view>
		<view class="submitbtn" v-if="examine_status==3" @click="submit">重新提交</view>
	</view>
</template>

<script>
	import amapFile from "../../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this, shake;
	export default {
		data() {
			return {
				settingdata: {
					name: '企业认证',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "companycenter"
				},
				// 上传内容
				images: [],
				// 回显的img
				echoimages: [],
				// 图片上传请求路径
				action: "",
				mobile: "",
				name: "",
				company_name: "",
				license: "",
				examine_status: 0,
				note: '', //审核失败原因
				intro: "",
				business: "",
				address: "",

				sipimg: [],
				// 回显的图片
				sipimages: [],

				array: ["", "", ""],
			}
		},
		onLoad(e) {
			_this = this
			_this.action = _this.$api.getbase() + 'fileupload'
			_this.getdata()

			_this.getcity()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("checkattestation", {
					type: 2
				}).then(data => {
					_this.company_name = data.company_name
					_this.license = data.license
					_this.mobile = data.mobile
					_this.name = data.name
					_this.examine_status = data.examine_status

					_this.intro = data.intro
					_this.business = data.business
					_this.address = data.address

					if (data && data.province) {
						_this.array = [data.province, data.city, data.area]
					}

					if (data.examine_status == 3) {
						_this.note = data.note
					}

					if (data.examine_status == 1 || data.examine_status == 3 || data.examine_status == 2) {
						_this.images = data.qualifications_path_info
						data.qualifications_path.forEach(item => {
							_this.echoimages.push({
								url: item
							})
						})

						_this.sipimg = data.photo_info
						data.photo.forEach(item => {
							_this.sipimages.push({
								url: item
							})
						})

					}

				});
			},
			// 删除图片
			removeimg(e) {
				_this.images.splice(e, 1)
			},
			// 上传成功
			uploaded(e) {
				_this.images = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.images.push(item.response.data.url)
						} else {
							_this.$refs['upload'].remove(index)
						}
					}
				})
			},

			// 删除图片
			sipremove(e) {
				_this.sipimg.splice(e, 1)
			},
			// 上传成功
			sipupload(e) {
				_this.sipimg = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.sipimg.push(item.response.data.url)
						} else {
							_this.$refs['uploads'].remove(index)
						}
					}
				})
			},

			setatlas(e) {
				_this.array = e.detail.value
			},
			// 提交
			submit() {
				_this.click_shake(function() {
					let data = [{
						value: _this.company_name,
						type: 1,
						title: "请填写企业名称"
					}, {
						value: _this.license,
						type: 1,
						title: "请填写营业执照注册号"
					}, {
						value: _this.name,
						type: 1,
						title: "请填写法人代表姓名"
					}, {
						value: _this.mobile,
						type: 1,
						title: "请填写法人代表电话"
					}, {
						value: _this.mobile,
						type: 3,
						title: "电话格式有误"
					}, {
						value: _this.images,
						type: 1,
						title: "请上传企业资质"
					}]
					console.log(_this.images, _this.echoimages)

					if (_this.array[0].length < 1) {
						uni.showToast({
							title: "请选择企业地址",
							icon: 'none',
						})
						return
					}

					if (_this.$plug.verify(data)) {
						_this.$api.post("enterpriseattes", {
							mobile: _this.mobile,
							name: _this.name,
							company_name: _this.company_name,
							license: _this.license,
							qualifications_path: _this.images.toString(),
							intro: _this.intro,
							business: _this.business,
							address: _this.address,
							photo: _this.sipimg,
							province: _this.array[0],
							city: _this.array[1],
							area: _this.array[2],
						}).then(data => {
							wx.showToast({
								title: "提交成功"
							})
							setTimeout(function() {
								wx.navigateBack({
									delta: 1
								})
							}, 500);
						});
					}
				})
			},
			// 获取当前位置
			getcity() {
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let array = data[0].regeocodeData.addressComponent
						_this.array = [array.province, array.city, array.district]
						console.log(_this.array)
					}
				})
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.metions {
		width: 100%;
		height: 72rpx;
		background-color: #D7F2E8;
		text-indent: 40rpx;
		line-height: 72rpx;
		color: #38BE8C;
		font-size: 22rpx;
	}

	.note {
		color: #F92028;
		margin: 30rpx 40rpx 0;
	}


	.rowones {
		padding: 30rpx 0;
		margin: 0 40rpx;
		border-bottom: 2rpx solid #EDEFF2;

		.rowt {
			color: #2C3240;
			font-size: 30rpx;
		}

		.are {
			padding: 24rpx;
			color: #333333;
			font-size: 30rpx;
		}

		.numbers {
			color: #999999;
			font-size: 24rpx;
			text-align: right;
		}
	}

	.rowone {
		padding: 30rpx 0;
		margin: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #EDEFF2;

		text {
			color: #2C3240;
			font-size: 30rpx;
		}

		.inputs {
			color: #2C3240;
			font-size: 30rpx;
			flex: 1;
		}

		.mainicon {
			margin-left: 20rpx;
		}

		.sexchoosebox {
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				color: #B1B8C8;
				font-size: 30rpx;
			}
		}
	}

	.idcardwrong {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding: 22rpx 0;
		margin: 0 40rpx;

		view {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 24rpx;
			color: #fff;
			font-size: 20rpx;
			background-color: #FE2746;
		}

		text {
			margin-left: 7rpx;
			color: #FE2746;
			font-size: 26rpx;
		}
	}

	.imgtitle {
		margin: 36rpx 40rpx 0 40rpx;
		color: #2C3240;
		font-size: 24rpx;
	}

	.imgmetions {
		color: #B1B8C8;
		font-size: 24rpx;
		margin: 36rpx 40rpx 0 40rpx;
	}

	.cardimgbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 50rpx 40rpx 0 40rpx;
		justify-content: space-between;
		flex-wrap: wrap;

		.oncard {
			width: 310rpx;
			height: 220rpx;
			border-radius: 2rpx;
			background-color: #F1F2F6;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				margin-top: 25rpx;
				color: #2C3240;
				font-size: 24rpx;
			}
		}
	}

	.submitbtn {
		margin: 100rpx 40rpx 40rpx 40rpx;
		height: 88rpx;
		width: 649rpx;
		background: linear-gradient(86deg, #38BE8C, #05ADBB);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.submitbtnD {
		margin: 100rpx 40rpx 40rpx 40rpx;
		height: 88rpx;
		width: 649rpx;
		background: #bbb;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.maask {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
</style>
